<my-pageheader></my-pageheader>

<div style="margin: 20px 20px 50px 20px">
    <mat-card style="margin-top: 20px; background-color: #f0f0f0">
        <span style="font-weight: bold; font-size: 28px" *ngIf="isMyself">我的关注</span>
        <span style="font-weight: bold; font-size: 28px" *ngIf="!isMyself">{{starerLogin}}&nbsp;的关注</span>
    </mat-card>
    <mat-card *ngIf="stars">
        <div *ngFor="let star of stars; trackBy: trackIdentity">
            <mat-card style="margin:20px 0" *ngIf="star.targetObject">
                <mat-list>
                    <mat-list-item>
                        <img mat-list-avatar src="{{star.targetObject.pictureUrl}}" (click)="viewStar(star)"
                             style="width: 64px; height: 64px; cursor: pointer">
                        <div mat-line style="font-size: 16px">
                            {{star.targetType}}
                        </div>
                        <div mat-line style="font-size: 20px; font-weight: bold; margin-top: 10px" *ngIf="star.targetType === 'AI模型'">
                            <a (click)="viewStar(star)">
                                {{star.targetObject.name}}
                            </a>
                        </div>
                        <div mat-line style="font-size: 16px; margin-top: 10px" *ngIf="star.targetType === 'AI模型'">
                            <a (click)="viewStar(star)" style="font-weight: normal">
                                {{star.targetObject.summary}}
                            </a>
                        </div>
                        <div mat-line style="font-size: 20px; font-weight: bold; margin-top: 10px" *ngIf="star.targetType === 'AI开放能力'">
                            <a (click)="viewStar(star)">
                                {{star.targetObject.solutionName}}
                            </a>
                        </div>
                        <div mat-line style="font-size: 16px; margin-top: 10px" *ngIf="star.targetType === 'AI开放能力'">
                            <span *ngIf="star.targetObject.status === '运行'" style="color: green">
                                正在运行
                            </span>
                            <span *ngIf="star.targetObject.status === '停止'" style="color: red">
                                已停止
                            </span>
                            <div class="pull-right" *ngIf="!isMobile">
                                <span>调用次数：{{star.targetObject.callCount}}</span>
                            </div>
                        </div>
                    </mat-list-item>
                </mat-list>
            </mat-card>
        </div>

        <div>
            <mat-paginator #paginator
                           [length]="totalItems"
                           [pageSize]="itemsPerPage"
                           [pageSizeOptions]="pageSizeOptions"
                           (page)="reloadPage($event)"
                           showFirstLastButtons>
            </mat-paginator>
        </div>
    </mat-card>

</div>


